<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { useRouter } from "vue-router";
import { useUserStore } from "../stores/user";

const userStore = useUserStore();
defineProps<{ msg: string }>();

const count = ref(0);

const ruleFormRef = ref<FormInstance>();

const validateContent = (
  rule: any,
  value: string,
  callback: (msg?: string | Error) => void
) => {
  if (value === "") {
    callback(new Error("请输入内容"));
  } else {
    callback();
  }
};
const isChecked = userStore.listData.length === userStore.checkAllList.length;
const ruleForm = reactive<{
  content: string;
  checkAll: boolean;
  isIndeterminate: boolean;
  list: Array<todoItemItf>;
  checkAllList: string[];
}>({
  checkAll: isChecked,
  isIndeterminate: isChecked,
  content: "",
  list: userStore.listData || [],
  checkAllList: userStore.checkAllList || [],
});

const rules = reactive({
  content: [{ validator: validateContent, trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      const data = {
        content: ruleForm.content,
        intro: "",
      };
      ruleForm.content = "";
      ruleForm.checkAll = false;
      ruleForm.isIndeterminate = false;
      // 添加到缓存
      userStore.addItem(data);
    } else {
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const handleCheckAllChange = (val: boolean) => {
  const allList = ruleForm.list.map((m) => m.content);
  ruleForm.isIndeterminate = false;
  ruleForm.checkAllList = val ? allList : [];
  // 添加到缓存
  userStore.addCheckList(allList);
};
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length;
  // 添加到缓存
  userStore.addCheckList(value);
  ruleForm.checkAll = checkedCount === ruleForm.list.length;
  ruleForm.isIndeterminate =
    checkedCount > 0 && checkedCount >= ruleForm.list.length;
};
const deleteItem = (item: todoItemItf) => {
  userStore.removeItem(item);
};
const router = useRouter();
const jumpToEcharts = () => {
  router.push("/echarts");
};
</script>

<template>
  <h1>{{ msg }}</h1>
  <p class="count">{{ count }}<el-button @click="count++">++</el-button></p>
  <h4>页面跳转：<el-button @click="jumpToEcharts">点我</el-button></h4>
  <h3>简易TODO实现：</h3>
  <div class="todo-box">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      @submit.prevent=""
      class="demo-ruleForm"
    >
      <el-form-item label="内容" prop="content">
        <el-input
          v-model.number="ruleForm.content"
          @keyup.enter="submitForm(ruleFormRef)"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >添加</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
      </el-form-item>
    </el-form>
    <div class="todo-list">
      <el-checkbox
        v-if="ruleForm.list.length"
        v-model="ruleForm.checkAll"
        :indeterminate="ruleForm.isIndeterminate"
        @change="handleCheckAllChange"
        >全部已做</el-checkbox
      >
      <el-checkbox-group
        v-model="ruleForm.checkAllList"
        @change="handleCheckedCitiesChange"
      >
        <div
          class="todo-item"
          v-for="item in ruleForm.list"
          :key="item.content"
        >
          <el-checkbox :label="item.content">{{ item.content }}</el-checkbox>
          <span class="del" title="删除" @click="deleteItem(item)">X</span>
        </div>
      </el-checkbox-group>
    </div>
  </div>
</template>

<style lang="less" scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
.todo-box {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
  .todo-list {
    padding-left: 150px;
  }
  ::v-deep(.todo-item .el-checkbox__input.is-checked + .el-checkbox__label) {
    text-decoration: line-through;
  }
  .todo-item:hover {
    .del {
      display: inline-block;
    }
  }
  .del {
    display: none;
    font-size: 15px;
    margin-left: 10px;
    cursor: pointer;
    color: #999;
  }
}
</style>
